require('./PageZljdjllist.styl');

import {Avatar, Boxs, Group, Scroller, ScrollList, SearchBar, Tab} from 'saltui';
import {Component} from 'react';
import reactMixin from 'react-mixin';
import Store from './store';
import Reflux from 'reflux';
import Actions from './actions'
import {Control} from 'react-keeper'
import {PropTypes} from "prop-types";
import {is} from 'immutable'
import DMap from './../../components/map';
import moment from "moment/moment";
const HBox = Boxs.HBox;
const Box = Boxs.Box;
const {API_URL} = require(`./../../config/${ENV}.json`);
const {WithContainer} = SearchBar;
const avatarColors = ['#78C06E', '#3BC2B5', '#78919D', '#5EC9F6', '#F6BF26'];

const Item = (props) => {

  let jdrysAvatar = [];
  let jdrysName = [];

  props.jdrys.map((jdy, jdyIndex) => {
    if (jdy.emplId == jdy.creatorId) {
      jdrysAvatar.push(
        <Avatar name={jdy.name} colors={avatarColors} key={jdyIndex}
                src={jdy.avatar}/>
      );

    }
    jdrysName.push(<span key={jdyIndex}
                         style={{paddingRight: '12px', fontSize: '14px'}}>{jdy.name}</span>);
  });

  return <Group.List>
    <div className='jcjl-t-list-wrap' key={props.index}>
      <HBox vAlign="center">
        <HBox flex={1}>
          <Box style={{width: '55px'}}>{jdrysAvatar}</Box>
          <Box className='demo3-t-list-text-content' flex={1}>
            <p style={{color: '#5E97F6'}} onClick={() => {
              props.click(props.data);

            }} className='jcjl-t-list-title'>记录编号: {props.coding}
            </p>
            <p className='jcjl-t-list-eng-title t-omit2'>
              <span>{props.eng.engName}</span></p>
            <p className='jcjl-t-list-title'>形象进度: {props.xxjdms}</p>
            <p className='jcjl-t-list-jdry'>监督人员: {jdrysName}</p>
            <p style={{marginTop: '3px'}}>
              <DMap map={props.map} onMapSelect={props.onMapSelect}
                    readOnly={true}/></p>
            <p className='jcjl-t-list-title'>
              <span className="jllx">{props.jllxName}</span>
              <span
                style={{paddingRight: '5px', color: '#666', fontSize: '12px', float: 'right'}}>
                {moment(props.jlrq).format('YYYY-MM-DD')}
                </span>
            </p>
          </Box>
        </HBox>
      </HBox>
    </div>
  </Group.List>
};


class Page extends Component {


  constructor(props) {
    super(props);
    this.onMapSelect = this.onMapSelect.bind(this);
    this.onTabChange = this.onTabChange.bind(this);
  }

  onMapSelect() {

  }

  onJdjlClick(obj) {
/*    dd.device.notification.showPreloader({
      text: "加载中...", //loading显示的字符，空表示不显示文字
      showIcon: true, //是否显示icon，默认true
    });*/
    console.log('跳转',obj.router);
    Control.go(`${obj.router}/${obj.id}/edit`)
  }

  //页签TAB切换事件
  onTabChange(obj) {

    if (obj.active == 0) {
      Actions.tabChange(false);
      this.refs.nScrollList.fetchData('top');
    } else {
      Actions.tabChange(true);
      this.refs.yScrollList.fetchData('top');
    }
  }

  componentWillMount() {
    moment().format();
    dd.device.notification.hidePreloader();

  }

  render() {

    let t = this;
    const props = {
      locale: 'zh_CN',
      instantSearch: false,
      hasHistory: true,
      searchDelay: 650,
      onEnter: () => {
        Actions.jiLuSearchClear();
      },
      onExit: () => {
        Actions.jiLuSearchClear();
      },
      onChange: (value) => {
        console.log(`Typing>>${value}`);
      },
      onSearch: (value) => {
        console.info(`Do search>>${value}`);
        Actions.jiLuSearch(value);
      },
    };

    return (
      <div className="zljdjllist">
        <WithContainer {...props}>

          <Scroller className="page" mouseWheel>
            {this.state.zljdjllist.searchItems.map((item, k) => {

              return <Group.List>
                <div className='jcjl-t-list-wrap' key={k} onClick={() => {
                  this.onJdjlClick(item);

                }}>
                  <Box>
                    <p style={{color: '#5E97F6'}} className='jcjl-t-list-title'>记录编号: {item.coding}
                    </p>
                    <p className='jcjl-t-list-eng-title t-omit2'>
                      <span>{item.eng.engName}</span></p>
                    <p className='jcjl-t-list-title'>形象进度: {item.xxjdms}</p>

                    <p className='jcjl-t-list-title'>
                      <span className="jllx">{item.jllxName}</span>
                      <span
                        style={{
                          paddingRight: '5px',
                          color: '#666',
                          fontSize: '12px',
                          float: 'right'
                        }}>{item.jlrq}</span>
                    </p>
                  </Box>

                </div>
              </Group.List>
            })}
          </Scroller>

        </WithContainer>
        <div style={{marginTop: '-1px'}}>
          <Tab activeKey={'0'} onChange={this.onTabChange}>
            <Tab.Item title="未上传">
              <div className="container" style={{height: window.innerHeight - 135}}>
                <ScrollList
                  ref="nScrollList" scrollRefresh={false}
                  url={API_URL + '/jd/jdjl/dd/page'}
                  pageSize={10}
                  dataType="json"
                  currentPageKey="page"
                  beforeFetch={(data) => {

                    return {
                      page: data.page,
                      size: data.pageSize,
                      isUpload: 0,
                      jllx: 'zl',
                      userid: this.state.zljdjllist.user.get('userid') ? this.state.zljdjllist.user.get('userid') : ''
                    }
                  }}
                  processData={(data) => {
                    return data
                  }}>
                  <Item click={this.onJdjlClick}/>
                </ScrollList>
              </div>

            </Tab.Item>


            <Tab.Item title="已上传">

              <div className="container" style={{height: window.innerHeight - 135}}>
                <ScrollList
                  ref="yScrollList" scrollRefresh={false}
                  url={API_URL + '/jd/jdjl/dd/page'}
                  pageSize={10}
                  dataType="json"
                  currentPageKey="page"
                  beforeFetch={(data) => {
                    return {
                      page: data.page,
                      size: data.pageSize,
                      isUpload: 1,
                      jllx: 'zl',
                      userid: this.state.zljdjllist.user.get('userid') ? this.state.zljdjllist.user.get('userid') : ''
                    }
                  }}
                  processData={(data) => {
                    return data
                  }}>
                  <Item click={this.onJdjlClick.bind(this)}/>
                </ScrollList>
              </div>
            </Tab.Item>
          </Tab>
        </div>

      </div>
    )
      ;
  }

  shouldComponentUpdate(nextProps = {}, nextState = {}) {
    const thisProps = this.props || {},
      thisState = this.state.zljdjllist || {};

    if (Object.keys(thisProps).length !== Object.keys(nextProps).length ||
      Object.keys(thisState).length !== Object.keys(nextState).length) {
      return true;
    }

    for (const key in nextProps) {
      if (thisProps[key] !== nextProps[key] || !is(thisProps[key], nextProps[key])) {
        console.log(thisProps[key], nextProps[key]);
        return true;
      }
    }

    for (const key in nextState) {
      if (thisState[key] !== nextState[key] || !is(thisState[key], nextState[key])) {
        return true;
      }
    }
    return false;
  }
}

reactMixin.onClass(Page, Reflux.connect(Store, "zljdjllist"));

export default Page;
